<template>
  <div>
    <header>
      <div id="hd_top">
        <div style="width: 990px; margin: 0 auto">
          <a href="/" style="margin-left: 20px">严选车官网</a>
          &nbsp
          <el-button type="text" @click="open">收藏本站</el-button>
        </div>
      </div>
      <div style="height:40px; line-height: 40px; width:100%; background-color: #e14800">
        <div style="width: 990px;margin: 0 auto">
          <div id="hd_d1">
            <ul>
              <a href="forumIndex" title="严选车社区" style="float:left; margin:-8px 15px 0 0;">
                <img src="images/forumImg/logo.png" alt="严选车社区" border="0">
              </a>
              <li style="background-color: white">
                <a href="forumIndex" style="color: red">首页</a>
              </li>
              <li>
                <a href="community">社区</a>
              </li>
              <li>
                <a href="">积分商城</a>
              </li>
              <li>
                <a href="">车友会群</a>
              </li>
              <li>
                <a href="">每日精选</a>
              </li>
              <li>
                <a href="">问题反馈</a>
              </li>
            </ul>
          </div>
          <div id="hd_d2">
            <ul>
              <li v-if="isLogin == false">
                <a class="a1" style="font-size: 13px" href="login">登录</a>
              </li>
              <li v-else>
                <scan class="a1" style="font-size: 13px; color:white">{{ this.username }}</scan>
              </li>
              <li v-if="isLogin == false">
                <a class="a1" style="font-size: 13px" href="register">注册</a>
              </li>
              <li v-else>
                <input class="a1" type="button" style="font-size: 13px; width: 40px; color: white; background-color: #e14800; border: none" value="登出" @click="logout">
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div style="width:990px;margin: 0 auto">
        <div id="scbar">
          <input type="text" placeholder="请输入搜索内容" v-model="select.keywords" style="padding-left: 5px">
          <el-button icon="el-icon-search" size="small" @click="searchByKeywords(currentPage,pageSize)"></el-button>
          &nbsp
          <b style="font-size: 15px">热搜</b>
          <a v-for="h in hotSearchArr" :href="h.url"
             style="font-size: 13px;color: #369;margin-left: 10px">{{ h.name }}</a>
        </div>
      </div>
    </header>
    <main style="margin-top: 10px">
      <div id="bg">
        <div style="overflow: hidden">
          <div class="bt" style="width: 56%;padding:0 2%;text-align: center">标题</div>
          <div class="bt" style="width: 10%;">作者</div>
          <div class="bt" style="width: 10%;">浏览量</div>
          <div class="bt" style="width: 20%;">发表时间</div>
          <hr>
        </div>
        <div v-for=" item in articleArr " style="overflow: hidden">
          <div class="bt" style="width: 56%;padding:0 2%;text-align: left">
            <a :href="'articleDetails?'+item.id">
              <img src="https://bbs.renrenche.com/static/image/common/folder_new.gif" alt="" style="height: 12px">
            </a>
            <a :href="'articleDetails?'+item.id" style="margin: 0 5px 0 5px;color: #1989fa">[快报]</a>
            <a :href="'articleDetails?id='+item.id">
              {{ item.title }}
            </a>
            <img src="https://bbs.renrenche.com/static/image/filetype/image_s.gif"
                 style="height: 14px;margin-left: 5px">
          </div>
          <div class="bt" style="width: 10%;">
            <a :href="'articleDetails?'+item.id">{{ item.author }}</a>
          </div>
          <div class="bt" style="width: 10%;">{{ item.pageView }}</div>
          <div class="bt" style="width: 20%;">{{ item.gmtCreate }}</div>
          <hr>
        </div>
      </div>
      <div style="width: 50%;margin: 10px auto;text-align: center">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </main>
    <footer>
      <div style="background: #DCDADB">
        <div id="ft_top">
          <div>
            <h3>关于我们</h3>
            <p>
              <el-link href="/" icon="el-icon-link">网站首页</el-link>
              <el-link href="introduction" icon="el-icon-link">关于我们</el-link>
            </p>
            <p>
              <el-link href="partner" icon="el-icon-link">加入我们</el-link>
              <el-link href="" icon="el-icon-link">联系我们</el-link>
            </p>
          </div>
          <div>
            <h3>联系我们</h3>
            <p>
              <el-link href="/" icon="el-icon-link">网站:http://localhost:8080</el-link>
            </p>
            <p>
              <el-link href="" icon="el-icon-link">微博:</el-link>
            </p>
            <p>
              <el-link href="" icon="el-icon-link">客服电话:</el-link>
            </p>
          </div>
          <div>
            <h3>关注我们</h3>
          </div>
        </div>
      </div>
      <div style="background-color: #363636">
        <div id="ft_bottom">
          <p>
            <a href="">手机版</a>
            <el-divider direction="vertical"></el-divider>
            <a href="">个人收藏</a>
            <el-divider direction="vertical"></el-divider>
            <a href="">小黑屋</a>
            <el-divider direction="vertical"></el-divider>
            <a href="">严选车-放心二手车-爱车人懂车人聚集地</a>
          </p>
          <p>京ICP备 88888888号</p>
          <p>地址：北京市朝阳区北苑东路中国铁建广场B座15-18层 电话: 688-666-8888</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>

export default {
  data() {
    return {
      username: '',
      isLogin: false,
      select: {
        keywords: '',
      },
      hotSearchArr: [{name: '严选车社区', url: 'forumIndex'}, {name: '严选车', url: '/'},
        {name: '二手车', url: 'detail'}, {name: '车友会', url: ''}],
      articleArr: [],
      currentPage: 1,
      total: 10,
      pageSize: 10,
      isSelect: false
    }
  },
  methods: {
    open() {
      this.$alert('请按 Ctrl+D 键添加到收藏夹', '提示信息', {
        confirmButtonText: '确定'
      })
    },
    logout(){
      localStorage.clear();
      location.reload();
    },
    searchByKeywords(page, pageSize) {
      this.isSelect = true;
      let url = 'http://localhost:5081/article/search?'+this.qs.stringify(this.select)+ '&page='+page+'&pageSize=' + pageSize;
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 200){
          let data = jsonResult.data;
          this.currentPage = data.page;
          this.total = data.total;
          this.articleArr = data.list;
        }else {
          this.$alert(jsonResult.message,'操作失败',{
            confirmButtonText:'确定',
            callback: action =>{}
          })
        }
      })
    },
    handleCurrentChange(val) {
      if (this.isSelect) {
        this.searchByKeywords(val, this.pageSize);
      } else {
        this.pageSelect(val, this.pageSize)
      }
    },
    handleSizeChange(val) {
      if(this.isSelect){
        this.searchByKeywords(this.currentPage,val);
      }else{
        this.pageSelect(this.currentPage,val);
      }
    },
    pageSelect(page, pageSize) {
      let url = 'http://localhost:5081/article/search?page=' + page + '&pageSize=' + pageSize;
      this.axios.get(url).then((response) => {
        let jsonResult = response.data();
        if (jsonResult.state == 200) {
          let data = jsonResult.data;
          this.currentPage = data.page;
          this.total = data.total;
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        }
      })
    }
  },
  mounted() {
    if (localStorage.getItem('formData') != null) {
      let str = localStorage.getItem('formData');
      this.username = str.substring(9,str.indexOf("&"));
      this.isLogin = true;
    }
    if (location.search.indexOf("keywords=") != -1) {
      this.select.keywords = decodeURI(location.search.split("keywords=")[1]);
    }
    this.searchByKeywords(this.currentPage, this.pageSize);
  }

}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

body {
  background: #f2f2f2;
}

a {
  color: #666;
  text-decoration: none;
}

.el-main {
  padding: 0;
}

#hd_top {
  text-align: left;
  height: 30px;
  line-height: 30px;
  background: #fff;
}

#hd_top .el-button--text {
  font-size: 13px;
  color: #666;
}

#hd_top a {
  font-size: 13px;
}

#hd_d1 {
  width: 800px;
  float: left;
  overflow: hidden;
  height: 40px;
  margin: 0 15px auto;
}

#hd_d1 ul li a:hover, #d2 a:hover {
  background-color: white;
  color: #D32031;
}

#hd_d1 ul li a {
  color: white;
  display: block;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
}

#hd_d2 {
  float: right;
}

input {
  height: 25px;
  width: 400px;
  margin-left: 18px;
}

ul {
  display: block;
}

ul li {
  margin: 0;
  list-style: none;
}

#hd_d1 ul {
  overflow: hidden;
  float: left;
}

#hd_d1 li {
  float: left;
}

#hd_d2 li {
  float: left;
}

#hd_d2 a {
  height: 30px;
  line-height: 30px;
  padding: 5px 15px !important;
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: normal;
}

#scbar {
  width: 990px;
  overflow: hidden;
  height: 42px;
  line-height: 42px;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #E9EFF5;
  background: #E8EFF5;
  margin-bottom: 10px;
}

.bt {
  float: left;
  background-color: white;
  height: 45px;
  line-height: 45px;
}

#bg {
  font-size: 20px;
  border-bottom: none;
  margin: 0 auto;
  width: 1200px;
  height: 520px;
}

#bg a {
  color: #333;
}

.box-card img {
  width: 100%;
}

footer {
  margin-top: 15px;
}

#ft_top {
  height: 170px;
  width: 900px;
  margin: 0 auto
}

#ft_top div {
  padding-top: 30px;
  text-align: center;
  width: 300px;
  float: left;
}

#ft_top p {
  margin-bottom: 5px;
}

#ft_top h3 {
  margin-bottom: 10px;
}

#ft_bottom {
  background-color: #363636;
  height: 120px;
  width: 990px;
  margin: 0 auto;
  padding-top: 30px;
  text-align: center;
  font-size: 12px;
}

#ft_bottom p {
  margin-bottom: 5px;
}

#ft_bottom a, #ft_bottom p {
  color: #FFFFFF;
}

</style>
